﻿<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>教师查询——某时间段所教授所有学生出勤状态</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"/>
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>

<body class="layui-anim layui-anim-up">
<div class="x-nav">
      <span class="layui-breadcrumb">
        <a href="">首页</a>
        <a>
          <cite>教师出勤管理</cite>
          <cite> / 查看出勤情况</cite></a>
      </span>
    <a class="layui-btn layui-btn-primary layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       href="javascript: page_sync()" title="刷新">
        <i class="layui-icon" style="font-size: 18px; line-height: 35px;">刷新</i></a>
</div>
<div class="x-body">
    <div class="layui-row">
        <form class="layui-form layui-col-md12 x-so" id="search_form">
            <input class="layui-input" placeholder="上课日期" name="date" id="date">
            <div class="layui-input-inline" name="number" id="number">
                <select name="number">
                    <option value="">请选择以下节次</option>
                    <option value="1">01</option>
                    <option value="2">02</option>
                    <option value="3">03</option>
                    <option value="4">04</option>
                    <option value="5">05</option>
                    <option value="6">06</option>
                    <option value="7">07</option>
                    <option value="8">08</option>
                </select>
            </div>
            <div class="layui-input-inline" name="cname" id="cname">
                <div class="layui-form"  lay-filter="test2">
                <select name="record" id="bycourse">
                    <option value="">请选择课程</option>
                </select>
                    </div>
            </div>


            <input type="text" name="id" placeholder="请输入学生学号" autocomplete="off"
                   class="layui-input">
            <button id="search_submit" class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon">
                &#xe615;</i></button>


        </form>
    </div>

    <xblock>
        <span class="x-left" style="line-height:40px">您所查询的出勤情况如下：</span>
    </xblock>

    <table class="layui-table" id="record_table">

    </table>


</div>
<script>
    var form, layedit, layer, laydate;
    function page_sync() {
        $("#search_submit").click()
    }
    //教师查找
    layui.use(['form', 'layer', 'table', 'laydate'], function () {
        $ = layui.jquery;
         form = layui.form;
         layer = layui.layer;
         table = layui.table;
         laydate = layui.laydate;
         selectRoleName();

        laydate.render({
            elem: '#date' //指定元素
        });


        //监听提交
        //响应按钮
        form.on('submit(search)', function (data) {
            var t = $("#bycourse").val();//获取选中的下拉框值
            $.get(
                "/api/record"
                , {m: 1, date: data.field['date'], number: data.field['number'], id: data.field['id'], cid : t}
                , function (response) {
                    record_date = response.data
                    $.each(record_date, function (index, item) {
                        item["action"] = '<button class="layui-btn layui-btn-xs" onclick="x_admin_show(\'修改出勤状态\',\'teacher-record-editstate.html?id=' + item["id"] + '&r_id=' + item['rid'] + '&status=' + item['status'] + '\',500,400,page_sync)">修改出勤状态</button>';
                        if (item["status"] == 0) {
                            item["status"] = "<span style='color:#5FB878;'>出勤</span>"
                        } else if (item["status"] == 1) {
                            item["status"] = "<span style='color:#FF5722;'>旷课</span>"
                        } else if (item["status"] == 2) {
                            item["status"] = "<span style='color:#FFB800;'>请假</span>"
                        }
                    })

                    //第一个实例
                    table.render({
                        elem: '#record_table'
                        , height: 480
                        , page: true //开启分页
                        , cols: [[ //表头
                            {field: 'id', title: '学号', sort: true, fixed: 'left'}
                            , {field: 'name', title: '姓名', sort: true}
                            , {field: 'cname', title: '课程名', sort: true}
                            , {field: 'date', title: '日期', sort: true}
                            , {field: 'number', title: '节次', sort: true}
                            , {field: 'status', title: '出勤状态', sort: true, align: 'center'}
                            , {field: 'action', title: '操作',fixed : 'right'}
                        ]]
                        , data: record_date
                    });

                }
            )
            return false;
        })
        $("#search_submit").click()
    })

    function selectRoleName() {
        $.ajax({
            url: "/api/course",
            type: "GET",
            success: function (result) {
                let role = $("#bycourse");
                let id_table = [];
                let data = result.data;
                $.each(data, function (index, item) {
                    if(id_table.findIndex(ele => ele.cid == item.cid) == -1){
                        id_table.push(item)
                    }
                });
                id_table.sort((a,b) => {return a.cid - b.cid});
                $.each(id_table, function (index, item) {
                    let option = $("<option></option>");
                    option.text(item.cname + "#00" + item.cid)
                    option.val(item.cid)
                    role.append(option);
                });
                form.render("select");
            }
        });

    }
</script>
</body>

</html>